import textColorClass from "@/assets/ts/text_color_class"
import ItemMoudle from "@/components/common/ItemModule"
import TitleMain from "@/components/common/TitleMain"

type AKey = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h';
type BKey = 'a' | 'b' | 'c'

type DataDefault<T extends string> = {
  [key in T]: string | number
}




type OptionItemDefault = {
  label: string
  bgClass: string
}
interface OptionItem<T> extends OptionItemDefault {
  dataIndex: keyof T
}

interface ItemNodeProps extends OptionItemDefault {
  dataSoruce: string | number
  dataSoruceBgClass?: string
}


const optionA: OptionItem<DataDefault<AKey>>[] = [
  {
    label: '机房',
    dataIndex: 'a',
    bgClass: 'bg-[url(@/assets/svg/SystemData-1.svg)]'
  },
  {
    label: '经营者',
    dataIndex: 'b',
    bgClass: 'bg-[url(@/assets/svg/SystemData-2.svg)]'
  },
  {
    label: '用户',
    dataIndex: 'c',
    bgClass: 'bg-[url(@/assets/svg/SystemData-3.svg)]'
  },
  {
    label: 'IP',
    dataIndex: 'd',
    bgClass: 'bg-[url(@/assets/svg/SystemData-4.svg)]'
  },
  {
    label: '网站备案',
    dataIndex: 'e',
    bgClass: 'bg-[url(@/assets/svg/SystemData-5.svg)]'
  },
  {
    label: '专线备案',
    dataIndex: 'f',
    bgClass: 'bg-[url(@/assets/svg/SystemData-6.svg)]'
  },
  {
    label: '部指令',
    dataIndex: 'g',
    bgClass: 'bg-[url(@/assets/svg/SystemData-7.svg)]'
  },
  {
    label: '省指令',
    dataIndex: 'h',
    bgClass: 'bg-[url(@/assets/svg/SystemData-8.svg)]'
  },

]


const optionB: OptionItem<DataDefault<BKey>>[] = [
  {
    label: '注册量',
    dataIndex: 'a',
    bgClass: 'bg-[url(@/assets/svg/SystemData-9.svg)]'
  },
  {
    label: '封堵量',
    dataIndex: 'b',
    bgClass: 'bg-[url(@/assets/svg/SystemData-10.svg)]'
  },
  {
    label: '解析量',
    dataIndex: 'c',
    bgClass: 'bg-[url(@/assets/svg/SystemData-11.svg)]'
  },
]

const dataA: DataDefault<AKey> = {
  a: 999,
  b: 7,
  c: 8,
  d: 9,
  e: 10,
  f: 12,
  g: 23,
  h:7
}

const dataB: DataDefault<BKey> = {
  a: 7,
  b: 23,
  c: 76
}

const ItemNode = ({ bgClass, label, dataSoruce, dataSoruceBgClass }: ItemNodeProps) => {
  return <div className={`${bgClass} bg-no-repeat bg-auto w-[88px] h-[36px]`}>
    <div className={`${dataSoruceBgClass} text-[14px] leading-[20px] font-bold`}>{dataSoruce}</div>
    <div className={`${textColorClass.text_default} text-[12px]`}>{label}</div>
  </div>
}

const SystemData = () => {
  return <ItemMoudle
    className="w-[384px]"
    childClassName="h-[306px] flex flex-col justify-between"
    header={
      <TitleMain title="信安系统数据" />
    }
  >

    <div className={`${textColorClass.text_default} text-[14px]`}>IDC攻击</div>
    <div className="grid grid-cols-3 gap-[16px_32px]">
      {
        optionA.map(({ dataIndex, bgClass, ...row }) => {
          return <ItemNode {...row} key={dataIndex} bgClass={`${bgClass} pl-[40px]`} dataSoruce={dataA[dataIndex]} dataSoruceBgClass="text-[#178AF4]" />
        })
      }
    </div>
    <div className={`${textColorClass.text_default} text-[14px]`}>域名数据</div>
    <div className="grid grid-cols-3 gap-[16px_32px]">
      {
        optionB.map(({ dataIndex, bgClass, ...row }) => {
          return <ItemNode {...row} key={dataIndex} bgClass={`${bgClass} pl-[50px]`} dataSoruce={dataB[dataIndex]} dataSoruceBgClass="text-[#FFE44E]" />
        })
      }
    </div>


  </ItemMoudle>
}

export default SystemData